<template>
  <van-tabs
    v-model="curShowIndex"
    :ellipsis="false"
    color="#ff5f16"
    title-active-color="#ff5f16"
    @click="changeTab()"
  >
    <van-tab
      v-for="date in showDates"
      :title="showDateFormat(date)"
      :key="date"
    >
      <cinemaFooter
        v-for="obj in schedules"
        :key="obj.scheduleId"
        :schedule="obj"
      />
    </van-tab>
  </van-tabs>
</template>

<script>
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
// dayjs中的日历使用(今天,明天,后天)
import calendar from "dayjs/plugin/calendar";
dayjs.extend(calendar);
import cinemaFooter from "./cinema-footer.vue";


export default {
  props: {
    showDates: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    cinemaFooter,
  },
  data() {
    return {
      schedules: {},
      showDate: this.$route.params.showDate,
      mockData: {
        status: 0,
        data: {
          schedules: [
          {
             advanceStopMins : 15,
             endAt : 1703053200,
             filmLanguage : "原声",
             hallName : "1号激光厅",
             imagery :  "3D" ,
             isOnsell : true,
             marketPrice : 5000,
             maxSalePrice : 2590,
             minSalePrice : 2590,
             salePrice : 2590,
             scheduleId : 400658610,
             showAt : 1703045700
            },
            {
              advanceStopMins : 15,
              endAt : 1703055900,
              filmLanguage : "原声",
              hallName : "6号激光巨幕厅",
              imagery :  "3D" ,
              isOnsell : true,
              marketPrice : 5000,
              maxSalePrice : 2590,
              minSalePrice : 2590,
              salePrice : 2590,
              scheduleId : 401057524,
              showAt : 1703048400
            },
            {
             advanceStopMins : 15,
             endAt : 1703058900,
             filmLanguage : "原声",
             hallName :  "5号激光厅" ,
             imagery :  "3D" ,
             isOnsell : true,
             marketPrice : 5000,
             maxSalePrice : 2590,
             minSalePrice : 2590,
             salePrice : 2590,
             scheduleId : 401407564,
             showAt : 1703051400
            },
            {
            advanceStopMins : 15,
            endAt : 1703061300,
            filmLanguage :  "原声" ,
            hallName :  "1号激光厅" ,
            imagery :  "3D" ,
            isOnsell : true,
            marketPrice : 5000,
            maxSalePrice : 2590,
            minSalePrice : 2590,
            salePrice : 2590,
            scheduleId : 398341590,
            showAt : 1703053800
            },
          ],
        },
        msg: "表示成功",
      },
    };
  },
  created() {
    this.getSchedules();
  },
  computed: {
    curShowIndex: {
      set(value) {
        this.showDate = this.showDates[value];
      },
      get() {
        let targetIndex = this.showDates.findIndex(
          (item) => item == this.showDate
        );
        return targetIndex !== -1 ? targetIndex : 0;
      },
    },
  },
  methods: {
    showDateFormat(showDate) {
      let dateStr = dayjs(showDate * 1000).calendar(null, {
        lastDay: "[昨天]",
        sameDay: "[今天] M月D日",
        nextDay: "[明天] M月D日",
        sameElse: "[周]dd M月D日",
        nextWeek: "[周]dd M月D日",
        lastWeek: "[周]dd M月D日",
      });
      return dateStr;
    },
    async getSchedules() {
      let res = await this.$api({
        headers: {
          "X-Host": "mall.film-ticket.schedule.list",
        },
        method: "get",
        url: "https://m.maizuo.com/gateway",
        params: {
          filmId: this.$route.params.filmId,
          cityId: this.$store.state.cityId,
          date: this.showDate,
        },
      });
      console.log("res", res);
      this.schedules = this.mockData.data.schedules;
    },
    changeTab() {
      this.getSchedules();
      let cinemaId = this.$route.params.cinemaId;
      let filmId = this.$route.params.filmId;
      this.$router.replace(
        `/cinema/${cinemaId}/film/${filmId}/${this.showDate}`
      );
    },
  },
};
</script>

<style>
</style>